<script setup>
</script>

<template>
	<div class="bodybox">
		<div class="sharkBox">
		    <div class="shark"></div>
		</div>
		
		<div class="fishBox">
		    <div class="fish"></div>
		</div>
	</div>
	
</template>

<style scoped>
	.bodybox {
		background-color: lightblue;
		width: 4000px;
		height: 3000px;
	}
	.shark {
	    width: 509px;
	    height: 270px; /* 盒子的宽高是一帧的宽高 */
	    margin: 100px auto;
	    background: url('../assets/fishanim/shark2.png') left top; /* 让图片一开始位于 0 px的位置 */
	    animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */
	}
	
	/* 鱼所在的父盒子 */
	.sharkBox {
	    width: 509px;
	    height: 270px;
	    animation: sharkBoxRun 20s linear infinite;
	}
	
	@keyframes sharkRun {
	    0% {
	    }
	
	    /* 270 * 8 = 2160 */
	    100% {
	        background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
	    }
	}
	
	@keyframes sharkBoxRun {
	    0% {
	        transform: translateX(-600px);
	    }
	
	    100% {
	        transform: translateX(3000px);
	    }
	}
	
	.fish {
	    width: 174px;
	    height: 126px;
	    position: relative;
	    left: 35%;
	    top: 0;
	    background: url('../assets/fishanim/fish.png') no-repeat left top;
	    /*transition:all 0.8s steps(8) ;*/
	    animation: fishRun 0.8s steps(8) infinite;
	
	}
	
	.fishBox {
	    width: 200px;
	    height: 200px;
	    /*background-color: rgba(0,0,0,0.4);*/
	    position: relative;
	    left: 0;
	    top: 0;
	    animation: fishBoxRun 20s linear infinite;
	    animation-direction: normal;
	}
	
	@keyframes fishRun {
	    0% {
	
	    }
	    100% {
	        background-position: left -1008px;
	    }
	}
	
	@keyframes fishBoxRun {
	    0% {
	
	    }
	
	    15% {
	        transform: translate(600px, 0px) rotate(45deg);
	    }
	
	    50% {
	        transform: translate(600px, 350px) rotate(135deg);
	    }
	
	    75% {
	        transform: translate(50px, 300px) rotate(235deg);
	    }
	
	    100% {
	        transform: translate(0px, 0px) rotate(360deg);
	    }
	}
</style>